<script lang="ts" setup>
  import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
  import { echarts, ECOption, graphicColors, colors } from '@/hooks/core/useECharts';
  import { IDataShow } from '@/api/types';
  import { useAppSettingStore } from '@/store/module/useAppSettingStore';
  import { isDark } from '@/hooks/core/useToggleDark';
  import { useMobile } from '@/hooks/core/useMobile';

  const ranInt = Math.floor(Math.random() * graphicColors.length) as unknown as number;

  const props = withDefaults(defineProps<{ showData: IDataShow[] }>(), {
    //@ts-ignore
    showData: [
      {
        xAxis: [],
        disData: [],
        disName: '',
        type: 'pie',
      },
    ] as IDataShow[],
  });
  let chartInstance: Recordable;
  const displayPie_ref = ref<HTMLElement>(null!);
  const initChart = () => {
    try {
      chartInstance = echarts.init(displayPie_ref.value);
    } catch (e) {}
    // 对图表初始化配置的控制
    const initOption = {
      color: colors,
      title: {
        left: 'center',
        bottom: 10,
        textStyle: {
          color: '#fff',
          textBorderColor: 'black',
          textBorderWidth: 1,
        },
      },
      legend: {
        orient: 'vertical',
        itemGap: 5,
        itemWidth: 20,
        itemHeight: 10,
        top: '5%',
        left: '1%',
        textStyle: {
          color: '#fff',
        },
        data: ['男', '女'],
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
      },
      series: [
        {
          name: '男女比例图',
          type: 'pie',
          radius: ['25%', '45%'],
          avoidLabelOverlap: false,
          center: ['25%', '50%'],
          itemStyle: {
            borderRadius: 3,
            borderColor: '#dedbdb',
            borderWidth: 1,
          },
          label: {
            show: false,
            position: 'center',
            color: '#fff',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '15',
              fontWeight: 'bold',
              formatter: '{b} : {c} ({d}%)',
            },
          },
          labelLine: {
            show: true,
          },
        },
        {
          name: '年龄比例图',
          type: 'pie',
          radius: [10, 60],
          center: ['70%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 5,
          },
        },
      ],
    };
    chartInstance.setOption(initOption);
    // 对图表对象进行鼠标事件的监听
  };
  const screenAdapter = () => {
    const titleFontSize = (displayPie_ref.value.offsetWidth / 100) * 3;
    // 和分辨率大小相关的配置项
    const adapterOption = {
      title: {
        textStyle: {
          fontSize: titleFontSize,
        },
      },
    };
    chartInstance.setOption(adapterOption);
    // 手动的调用图表对象的resize 才能产生效果
    chartInstance.resize();
  };
  const destroyed = () => {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener('resize', screenAdapter);
  };
  const updateECharts = (showAll = false) => {
    const dataOption = {
      title: {
        text: '▎' + '流行性疾病比例图',
      },
      series: [
        {
          name: '男女比例图',
          data: props.showData[0].disData,
        },
        {
          name: '年龄比例图',
          data: props.showData[1].disData,
        },
      ],
    };
    chartInstance.setOption(dataOption);
  };
  onMounted(() => {
    initChart();
    window.addEventListener('resize', screenAdapter);
    // 在页面加载完成的时候, 主动进行屏幕的适配
    screenAdapter();
    updateECharts();
  });
  onUnmounted(() => {
    destroyed();
  });
  const isMobile = useMobile();
  watch(isMobile, (value) => {
    chartInstance.setOption({});
  });
  watch(isDark, (value) => {
    chartInstance.setOption({});
  });
</script>

<!-- 商家销量统计的横向柱状图 -->
<template>
  <div class="enter-y" ref="displayPie_ref"></div>
</template>

<style lang="scss"></style>
